<template>
  <div>
    <CTable
      :columns="columns"
      :data="tableData"
      :pager="page"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
      <el-table-column
        slot="table-oper"
        align="center"
        label="操作"
        width="150"
        :resizable="false"
      >
        <template slot-scope="scope">
          <el-button
            class="edit-bgc"
            icon="el-icon-edit"
            @click="editTableData(scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </CTable>
  </div>
</template>

<script>
import CTable from "@/components/common/CTable";
export default {
  data() {
    return {
      columns: [
        {
          prop: "date",
          label: "日期",
          width: "150",
          align: "left",
          show: true,
        },
        {
          prop: "name",
          label: "姓名",
          width: "200",
          align: "center",
          show: true,
        },
        { prop: "address", label: "地址", align: "left",  show: true },
      ],
      tableData: [],
      page: {
        pageNo: 1,
        limit: 2,
        total: 0,
      },
    };
  },
  components: {
    CTable,
  },
  mounted() {
    this.tableData = [
      {
        date: "2016-05-02",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1518 弄",
      },
      {
        date: "2016-05-04",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1517 弄",
      },
      {
        date: "2016-05-01",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1519 弄",
      },
      {
        date: "2016-05-03",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1516 弄",
      },
    ];
    this.page.total = this.tableData.length;
  },
  methods: {
    // 改变页面大小处理
    handleSizeChange(val) {
      console.log(val);
    },
    // 翻页处理
    handleCurrentChange(val) {
      console.log(val);
    },
    editTableData(row) {
      console.log(row);
    },
  },
};
</script>
